---
id: html-page
sidebar_position: 4
---

import BrowserWindow from '@site/src/theme/BrowserWindow';

# HTML page

Some tools need to be executed within a browser to work. To support this scenario, rise4fun uses [puppeteer](https://www.npmjs.com/package/puppeteer)
to launch headless browsers and run the code with it.

This scenario is a bit more involved because it involves sending messages back and forth between the driver and
the script running in the headless browser.

```js title="./docusaurus.config.js"
    compileCode: {
        langs: [
        ...,
// highlight-start
        {
            lang: "msgl",
            html: "./langs/msagl.html",
            outputFiles: [{
                name: "output.svg",
                title: "Generated graph",
            }]
        }
// highlight-end
    ]}
```

The file `msagl.html` is a HTML page that receives render requests and send back results.

```html title="./langs/msagl.html"
<html>
  <head>
    ...
  </head>
  <script type="module">
    document.addEventListener("DOMContentLoaded", () => {
        // setup renderer
        ...
        // handle rendering requests
        window.addEventListener("message", (msg) => {
            const { type, lang, source, id } = msg.data;
            // it's a request for us!
            if (type === "puppet" && lang == "msagl") {
                // compute response
                const svg = ...(source)
                // send response back
                window.rise4funPostMessage?.({
                    id,
                    outputFiles: {
                        "output.svg": svg,
                    },
                });
            }
        });

        // notify driver we are ready
        window.rise4funReady?.();
    });
  </script>
  <body></body>
</html>
```

Let's take a look at this example in action.

````markdown
```msagl
graph G {
    kspacey -- swilliams;
    swilliams -- kbacon;
    bpitt -- kbacon;
    hford -- lwilson;
    lwilson -- kbacon;
}
```
````

When rendered in the docs, this snippet looks like any other code snippe.
But you'll also notice an additional box
underneath with the capitalized text.

<BrowserWindow>

```msagl
graph kspacey {
    kspacey -- swilliams;
    swilliams -- kbacon;
    bpitt -- kbacon;
    hford -- lwilson;
    lwilson -- kbacon;
}
```

</BrowserWindow>
